<template>
  <router-link
    :to="{name: 'live', query: {
      classId: liveInfo.ClassId,
      courseId: liveInfo.CourseId,
      sectionId: liveInfo.SectionId,
      sectionName: liveInfo.SectionName,
      title: liveInfo.ClassName
    }}"
    tag="div"
    class="live-item"
  >
    <div class="img-box">
      <img
        :src="liveInfo.CourseImg"
        class="img-course"
      >
      <div
        :class="{'mask-living': liveInfo.LiveStatus === 1}"
        class="mask"
      >
        <img
          v-if="liveInfo.LiveStatus === 1"
          src="~assets/class/living_img.png"
          class="img-living"
        >
        <div
          :class="{'mask-text-living': liveInfo.LiveStatus === 1}"
          class="mask-text"
        >
          {{ LiveStatusText[liveInfo.LiveStatus] }}
        </div>
      </div>
    </div>
    <div class="section-name">
      {{ liveInfo.SectionName }}
    </div>
    <div class="class-course-name">
      {{ liveInfo.ClassName.length > 10 ?
        liveInfo.ClassName.substring(0, 10) + '...' : liveInfo.ClassName }}
      <span>（{{ liveInfo.CourseName.length > 10 ?
        liveInfo.CourseName.substring(0, 10) + '...' : liveInfo.CourseName }}）</span>
    </div>
    <div class="live-time">
      <img
        src="~assets/class/live_time.png"
        class="img-time-mark"
      >
      <span class="live-time-text">{{ liveInfo.LiveTime }}</span>
      <span class="live-teacher">讲师：{{ liveInfo.TeacherName }}</span>
    </div>
  </router-link>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  // eslint-disable-next-line vue/require-default-prop
  // eslint-disable-next-line vue/require-prop-types
  props: ['liveInfo'],
  data () {
    return {
      // 直播状态 0：未开始 1：正在直播 2：已结束
      LiveStatusText: ['直播未开始', '直播中', '直播已结束'],
    }
  },
  methods: {},
})
</script>

<style lang="scss" scoped>
.live-item {
  width: calc(100% - 60px);
  margin: 21px auto 0;
  padding-bottom: 10px;
  box-shadow: 0 0 10px rgba(51, 51, 51, .2);
  background: #fff;
  border-radius: 5px;
}
.img-box {
  position: relative;
  height: 380px;
  .img-course {
    width: 100%;
    height: 100%;
    border-radius: 5px 5px 0 0;
  }
}
.mask, .mask-living {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 380px;
  border-radius: 5px 5px 0 0;
  background: rgba(0, 0, 0, .6);
}
.mask-living {
  background: rgba(0, 0, 0, .3);
}
.mask-text {
  color: #fff;
  font-size: 30px;
  margin: 170px auto;
}
.mask-text-living {
  color: #fff;
  font-size: 24px;
  margin: 10px auto;
}
.img-living {
  width: 90px;
  margin-top: 140px;
}
.section-name {
  font-size: 28px;
  color: #333;
  padding-top: 15px;
  margin-left: 20px;
  font-weight: 500;
  @include ellipsis;
}
.class-course-name {
  font-size: 26px;
  color: #666;
  margin-top: 15px;
  margin-left: 20px;
  @include ellipsis;
}
.live-time {
  position: relative;
  margin-left: 20px;
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .img-time-mark {
    width: 40px;
    height: 40px;
  }
  .live-time-text {
    color: #666;
    font-size: 26px;
    margin-left: 10px;
  }
  .live-teacher {
    color: #333333;
    font-size: 24px;
    position: absolute;
    right: 20px;
  }
}
</style>
